<script setup>
import { ref } from 'vue'
import { addconsumer } from '@/api/consumer'
const drawer = ref(false)
const formLabelWidth = '100px'

// 表单数据
const form = ref({
  username: '',
  password: '',
  phoneNum: '',
  email: '',
  location: '',
  createTime: '',
  updateTime: '',
  birth: ''
})

// 父组件事件发射器
const emit = defineEmits(['submitSuccess'])

// 打开抽屉方法
const openDrawer = () => {
  drawer.value = true
  form.value = {
    username: '',
    password: '',
    phoneNum: '',
    email: '',
    location: '',
    createTime: '',
    updateTime: '',
    birth: ''
  }
}

// 暴露方法给父组件使用
defineExpose({ openDrawer })

// 表单提交
const onSubmit = async () => {
  const res = await addconsumer(form.value)
  ElMessage.success(res.msg)
  drawer.value = false
  emit('submitSuccess') // ✅ 通知父组件刷新
}
</script>

<template>
  <el-drawer v-model="drawer" title="添加用户" direction="rtl" size="40%">
    <div class="demo-drawer__content">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNum" />
        </el-form-item>
        <el-form-item label="电子邮件" :label-width="formLabelWidth">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.createTime" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="上次登录时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.updateTime" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<style scoped>
.demo-drawer__content {
  padding: 20px;
}
</style>
